<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AI 论坛</title>
		<style type="text/css">
			/*对网页进行第二次修饰*/
			body{font-size: 12px;}
			/*对整个标签,和表格 设置宽度为990像素*/
			#discuss,#discuss-datas{
				width: 990px;
			}
			#discuss div.mt{
				/*高度,边框,背景*/
				height: 30px;
				border: 1px solid #DDDDDD;
				border-top: 2px solid #999999;
				background: #f7f7f7;
			}
			#discuss-content{
				border-bottom: 1px solid #DDDDDD;
			}
			#discuss-datas tr.header td{
				/*加粗 上下内边距 下边框*/
				font-weight: bold;
				padding: 5px 0;
				border-bottom: 1px solid #DDDDDD;
				color: #666666;
			}
			#discuss-datas td{
				/*内容水平居中对齐*/
				text-align: center;
			}
			#discuss-datas td.col1{
				/*宽度,文本左对齐*/
				width: 620px;
				text-align: left;
			}
			#discuss-datas tbody td{
				/*文本颜色*/
				color: #9c9c9c;
			}
			#discuss a{
				/*改链接颜色 去掉下划线*/
				text-decoration: none;
				color: #005aa0;
			}
			#discuss a:hover{
				text-decoration: underline;
			}
			#discuss-datas tbody td{
				/*上下内边距 下边框*/
				padding: 5px 0px;
				border-bottom: 1px dotted #DDDDDD;
			}
			/*给论坛内容加标签 加图标*/
			#discuss i{
				/*左内边距 下内边距高度 背景图*/
				padding-left: 21px;
				padding-bottom: 5px;
				background:url(img/c63802c9ee7e4ddec0e53e152e665ea.png) no-repeat;
				background-size: 100%;
			}
			#discuss div.mt a{
				float:left;
				width: 100px;
				height: 30px;
				text-align: center;
				line-height: 30px;
			}
			#discuss div.mt a:hover{
				text-decoration: none;
				color: #E4393C;
			}
			#discuss div.mt a.current{
				border: 1px solid #DDDDDD;
				border-top: 2px solid #E4393C;
				border-bottom: 0;
				background: #ffffff;
				margin-top: -6px;
				height: 35px;
				line-height: 35px;
				color: #E4393C;
			}
			#if{
				color:white;
			}
		</style>
	</head>
	<body>
		<div id='alldocument'>
		<!--论坛div-->
		<div id="discuss">
			<!--页签菜单栏-->
			<!--
			<div class="mt">
				<a href="#">网友讨论圈</a>
				<a href="#" class="current">晒单帖</a>
				<a href="#">问答帖</a>
				<a href="#">讨论帖</a>
			</div>
			-->
			<!--讨论内容-->
			<div id="discuss-content">
				<!--表格内容-->
				<table id="discuss-datas">
					<!--标题栏-->
					<tr class="header">
						<td class="col1">主题</td>
						<!--<td>浏览/回复</td>-->
						<td>作者</td>
						<td>时间</td>
					</tr>
					<!--内容栏-->
					<tbody>
						<tr>
							<td class="col1"><a id='ti0' onclick="geta(0);">空</a></td>		
							<td id='au0'>空</td>
							<td id='da0'>空</td>
						</tr>
						<tr>
							<td class="col1"><a id='ti1' onclick="geta(1);">空</a></td>		
							<td id='au1'>空</td>
							<td id='da1'>空</td>
						</tr>
						<tr>
							<td class="col1"><a id='ti2' onclick="geta(2);">空</a></td>		
							<td id='au2'>空</td>
							<td id='da2'>空</td>
						</tr>
						<tr>
							<td class="col1"><a id='ti3' onclick="geta(3);">空</a></td>		
							<td id='au3'>空</td>
							<td id='da3'>空</td>
						</tr>
						<tr>
							<td class="col1"><a id='ti4' onclick="geta(4);">空</a></td>		
							<td id='au4'>空</td>
							<td id='da4'>空</td>
						</tr>
						<tr>
							<td class="col1"><a id='ti5' onclick="geta(5);">空</a></td>		
							<td id='au5'>空</td>
							<td id='da5'>空</td>
						</tr>
						<tr>
							<td class="col1"><a id='ti6' onclick="geta(6);">空</a></td>		
							<td id='au6'>空</td>
							<td id='da6'>空</td>
						</tr>
						<tr>
							<td class="col1"><a id='ti7' onclick="geta(7);">空</a></td>		
							<td id='au7'>空</td>
							<td id='da7'>空</td>
						</tr>
						<tr>
							<td class="col1"><a id='ti8' onclick="geta(8);">空</a></td>
							<td id='au8'>空</td>
							<td id='da8'>空</td>
						</tr>
						<tr>
							<td class="col1"><a id='ti9' onclick="geta(9);">空</a></td>
							<td id='au9'>空</td>
							<td id='da9'>空</td>
						</tr>
					</tbody>
				</table>
				<!--显示的拓展内容-->
				<!--
				<div id="discuss-total">
					<div class="all_discuss">
						共900个话题
						<a href="#">浏览全部话题>>></a>
					</div>
					
					<div class="new_discuss" align="right">
						有问题要与其他用户讨论
						<a href="#">[发表帖子]</a>
					</div>
					
				</div>
				-->
			</div>
			
		</div>
		<button onclick="up();" type='button'>上一页</button>
  	    <button onclick="down();" type='button'>下一页</button>
  	    
  	    </div>
  	   	<div>
	  	    <div id='if'>
	  	   	</div>
	  	   	<button id='show' type='button' onclick="show();">返回</button>
  	   	</div>
	</body>
	<script src="js/JQ.js"></script>
	<script>
		var show = function(){
			$("#alldocument").show();
			$("#show").hide();
			document.getElementById("if").innerHTML=""; 
		}
		var geta = function(id){
			//alert();
			$("#show").show();
			$("#alldocument").hide();
			document.getElementById("if").innerHTML=jsonArray[id+postpoint].text; 
		}
	
		////////////////////////////////////////////////////////////
		var josnsize = 0;
		var jsonArray;
		var postpoint = 0;
		var down = function(){
			var idpoint = 0;
			
			//alert(postpoint);
			postpoint = postpoint+10;
			if(postpoint > josnsize){
				postpoint = josnsize - josnsize%10;
			}
			else{
				for(var i = postpoint; i < postpoint+10; i+=1)
				{
					//alert(typeof (i));
					//alert(typeof (josnsize));
					if(i>=josnsize){
						//alert(i);
						document.getElementById("ti"+idpoint).innerHTML="空"; 
						document.getElementById("au"+idpoint).innerHTML="空"; 
						document.getElementById("da"+idpoint).innerHTML="空"; 
						idpoint+=1;
					}
					else{
						document.getElementById("ti"+idpoint).innerHTML=jsonArray[i].title; 
						document.getElementById("au"+idpoint).innerHTML=jsonArray[i].author; 
						document.getElementById("da"+idpoint).innerHTML=jsonArray[i].date; 
						idpoint+=1;
					}				
				}
			}
				
		}
		var up = function(){
			var idpoint = 0; 
			
			//alert(postpoint);
			postpoint = postpoint-10;
			if(postpoint < 0){
				postpoint = 0;
			}
			else{
				for(var i = postpoint; i < postpoint+10; i+=1)
				{
					//alert(i>josnsize);
					if(i>=josnsize){
						alert(i);
						document.getElementById("ti"+idpoint).innerHTML="空"; 
						document.getElementById("au"+idpoint).innerHTML="空"; 
						document.getElementById("da"+idpoint).innerHTML="空"; 
						idpoint+=1;
					}
					else{
						document.getElementById("ti"+idpoint).innerHTML=jsonArray[i].title; 
						document.getElementById("au"+idpoint).innerHTML=jsonArray[i].author; 
						document.getElementById("da"+idpoint).innerHTML=jsonArray[i].date; 
						idpoint+=1;
					}
				}
			}
			
		}
		$(document).ready(function(){
			$("#show").hide();
			$.post("postings",{data:"postings.html"},function(data,status){
				alert(data);
				jsonArray = JSON.parse(data);
				josnsize = jsonArray.length;
				//alert('数据：'+jsonArray[11].title+'状态：'+status);
				//console.log('前端：'+jsonArray);
				//alert(postpoint);
				for(var i = postpoint; i < postpoint+10; i+=1)
				{
					//alert(i);
					//alert("ti"+i);
					document.getElementById("ti"+i).innerHTML=jsonArray[i].title;
					document.getElementById("au"+i).innerHTML=jsonArray[i].author;
					document.getElementById("da"+i).innerHTML=jsonArray[i].date;
				}
			});
		})
	</script>
</html>
